<script setup lang="ts">
import { SinalService } from '@/server/SinalService';
import { Message } from '@/server/message';
import { onMounted, ref } from 'vue';
const localVideoDom = ref<any>(null);
const remoteVideoDom = ref<any>(null);

let msg = ref("");
let room = ref("");
let sinalService: SinalService;


let localVideo: any;
let remoteVideo: any;
let localStream: MediaStream;

var localConnect: RTCPeerConnection;
var remoteConnect: RTCPeerConnection;

onMounted(() => {
  localVideo = localVideoDom.value;
  remoteVideo = remoteVideoDom.value;
})



function start() {
  if (!room.value) {
    alert("请输入房间")
    return
  }
  sinalService = SinalService.joinRoom("ws://localhost:8080/web", room.value);

  sinalService.message((e) => {
    const data = JSON.parse(e.data)
    console.log("收到消息：", data);
    console.log("收到消息：", data.data);

    if (data.type == "offer") {
      const desc =data.data;//JSON.parse(data.data)
      console.log("offer=====>:",desc);
      remoteConnect.setRemoteDescription(desc);
      //接收到之后
      remoteConnect.createAnswer()
        .then((remoteDesc) => {
          console.log("设置远程desc", remoteDesc);
          remoteConnect.setLocalDescription(remoteDesc);
          sinalService.answer(remoteDesc);
        }).catch(handleError);
    } else if (data.type == "answer") {
      const desc =data.data;//JSON.parse(data.data)
      console.log("answer=====>:",desc);
      remoteConnect.setRemoteDescription(desc);

      localConnect.onicecandidate = (e: any) => {
    console.log("onicecandidate,", e);
    remoteConnect.addIceCandidate(e.candidate)
  }
  remoteConnect.ontrack = getRemoteStream;
  localStream.getTracks().forEach((track) => {
    localConnect.addTrack(track, localStream);
  });
    }
  })
  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: { width: 128 / 2, height: 72 / 2 }
  })
    .then((mediaStream: MediaStream) => {
      localStream = mediaStream;
      localVideo.srcObject = mediaStream;
    })
    .catch(getUserMediaError);

}

function stop() {
  if (!localVideo) {
    return;
  }
  localVideo.srcObject.getTracks()[0].stop();
}
function call() {
  if (!localVideo) {
    return
  }
  if (!room.value) {
    alert("请输入房间")
    return
  }
  // const configuration = { 'iceServers': [{ 'urls': 'stun:stun.l.google.com:19302' }] }
  const configuration = {};
  localConnect = new RTCPeerConnection(configuration);
  remoteConnect = new RTCPeerConnection(configuration);
  
  //媒体协商
  let offerOptions: any = {
    offerToRecieveVideo: 1,
    offerToRecieveAutio: 0,
  }

  localConnect.createOffer(offerOptions)
    .then((desc) => {
      localConnect.setLocalDescription(desc);
      // remoteConnect.setRemoteDescription(desc);
      // 交换信令
      console.log("发送信令：", desc);
      sinalService.offer(desc);
      // remoteConnect.createAnswer()
      //   .then((remoteDesc) => {
      //     console.log("设置远程desc", remoteDesc);
      //     remoteConnect.setLocalDescription(remoteDesc);
      //     localConnect.setRemoteDescription(remoteDesc);
      //   }).catch(handleError);
    }).catch(handleError);

}
function getRemoteStream(e: RTCTrackEvent) {
  console.log("远程视频", e);

  remoteVideo.srcObject = e.streams[0];
}

function handleError(error: any) {
  console.log(error);
}
function getUserMediaError(error: any) {
  console.log(error);
}
</script>



<template>
  <div class="about">
    房间：<input v-model="room" />
    <br>
    <button @click="start">开始</button>
    <button @click="stop">停止</button>
    <button @click="call">call</button>
    <br />
    <video ref="localVideoDom" autoplay playsinline></video>
    <video ref="remoteVideoDom" autoplay playsinline></video>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

video {
  width: 64px;
  height: 36px;
  background-color: black;
  padding: 2px;

  /* filter: blur(1px) invert(2) opacity(1); */
  /* transform: rotateY(180deg); */
  /* filter: hue-rotate(180deg) saturate(200%); */
}
</style>
